<template>
  <view class="member-container">
    <scroll-view class="member-scroll" scroll-y>
      <view class="banner" @click="$u.route('/pages/user/record/record')">
        <view class="member-number">
          <view class="">No.{{ userInfo.number }}</view>
          <view class="">明细</view>
        </view>
        <view style="margin-top: 10rpx">账户余额</view>
        <view class="member-bottom">
          <view class="member-price">￥{{ balance }}</view>
          <view style="font-size: 24rpx">
            <view>充值本金￥{{ userInfo.rechargeBalance }}</view>
            <view>商家赠送￥{{ userInfo.giftBalance }}</view>
          </view>
        </view>
      </view>

      <view style="line-height: 100rpx; font-size: 30rpx; font-weight: 600">储值有礼</view>
      <view class="check-member flex flex--wrap">
        <view :class="{ active: isSelect === index }" v-for="(item, index) in balanceList" :key="item.id" @click="onCheck(item, index)">
          <!-- <view class="discount" v-if="isSelect === index"><u-icon name="checkmark-circle-fill" color="#e2b778" size="30"></u-icon></view> -->
          <view style="padding-top: 10rpx; font-size: 24rpx">
            ￥
            <text style="font-size: 40rpx; font-weight: 600">{{ item.amount }}</text>
          </view>
          <view style="padding-top: 10rpx; font-size: 24rpx">售价{{ item.depositMoney }}</view>
          <!-- 赠券 -->
          <view class="gift-box" v-if="item.couponCount > 0">赠券 × {{ item.couponCount }}</view>
        </view>
      </view>
      <view class="explain">
        <view>活动说明:</view>
        <view style="margin-top: 10rpx">{{ reactifyRrmark }}</view>
      </view>

      <view v-if="couponList.length > 0">
        <GiftCoupon title="赠送优惠券" :couponList="couponList"></GiftCoupon>
        <!-- <view style="line-height: 120rpx; font-size: 35rpx; font-weight: 600"
          >赠送优惠券</view
        >
        <view class="gift-list" v-for="item in couponList" :key="item.id">
          <view class="info">
            <view class="left">
              <image
                src="@/static/icon/券.svg"
                style="width: 60rpx; height: 60rpx"
              ></image>
            </view>
            <view class="center">
              <view>{{ item.name }}</view>
              <view
                style="font-size: 24rpx; color: #b6b6b6; margin-top: 20rpx"
                >{{
                  item.remark
                    ? item.remark.length > 15
                      ? item.remark.slice(0, 15) + "..."
                      : item.remark
                    : ""
                }}</view
              >
            </view>
            <view class="right"> x{{ item.couponCount }}张 </view>
          </view>
        </view> -->
      </view>
    </scroll-view>

    <view class="member-footer">
      <view>
        <view>
          实付金额￥
          <text style="font-weight: 600">{{ depositMoney }}</text>
        </view>
        <view style="color: #f05f47">
          实际到账￥
          <text style="font-size: 40rpx">{{ amount }}</text>
        </view>
      </view>
      <view style="margin-top: 30rpx; font-size: 30rpx; width: 35%">
        <u-button @click="onRefill" style="color: #7d5a35" color="linear-gradient(to right, #edd2a0,#d5a967)" shape="circle">立即充值</u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { refillPay } from '@/common/util.js';
import GiftCoupon from './components/GiftCoupon.vue';
export default {
  components: { GiftCoupon },
  data() {
    return {
      isSelect: 0,
      balanceList: [],
      checkData: {},
      userInfo: {},
      couponList: [], // 赠送券列表
      reactifyRrmark: ''
    };
  },
  computed: {
    balance() {
      if (this.userInfo.balance) {
        return this.userInfo.balance.toFixed(2);
      } else {
        return 0.0;
      }
    },
    depositMoney() {
      if (this.checkData.depositMoney) {
        return this.checkData.depositMoney.toFixed(2);
      } else {
        return 0.0;
      }
    },
    amount() {
      if (this.checkData.amount) {
        return this.checkData.amount.toFixed(2);
      } else {
        return 0.0;
      }
    }
  },
  onShow() {
    this.getPageList(this.isSelect);
  },
  methods: {
    async getPageList(index) {
      // 获取列表
      const res = await this.$api.getBalanceList();
      // console.log(res);
      this.balanceList = res.data || [];
      this.checkData = res.data[0] || {};
      this.userInfo = res.otherData || {};
      this.couponList = res.data[index]?.couponList || [];
      this.reactifyRrmark = res.data[index]?.remark || '无';
    },
    onCheck(item, index) {
      // 选中
      this.isSelect = index;
      this.checkData = item;
      this.couponList = item.couponList || [];
      this.reactifyRrmark = item.remark || '无';
    },
    onRefill() {
      // 充值
      if (this.balanceList.length < 1) return;
      refillPay(0, {
        money: this.checkData.depositMoney,
        giftAmount: this.checkData.giveMoney
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.member-container {
  background-color: #f5f5f5;
  height: 100vh;
  width: 100%;
  padding: 30rpx 30rpx 0;
  .member-scroll {
    height: calc(100vh - 240rpx);

    .banner {
      padding: 30rpx;
      margin-top: 30rpx;
      background-color: #1b1b1b;
      height: 260rpx;
      border-radius: 10rpx;
      box-shadow: 5rpx 5rpx 5rpx #8c8c8c;
      color: #e5cd9b;

      .member-number {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .member-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30rpx;
        .member-price {
          font-size: 50rpx;
        }
      }
    }

    .check-member {
      // padding-top: 50rpx;

      & > view {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 45rpx;
        height: 200rpx;
        width: 30%;
        margin-right: 20rpx;
        border-radius: 15rpx;
        background-color: #ffffff;
        color: #666666;
        // text-align: center;

        .discount {
          position: absolute;
          top: -4rpx;
          left: -4rpx;
          border-top-left-radius: 15rpx;
          border-bottom-right-radius: 5rpx;
          text-align: center;
          line-height: 40rpx;
          color: #fff;
          font-size: 20rpx;
        }
        .gift-box {
          z-index: 99;
          text-align: center;
          width: 80%;
          height: 50rpx;
          position: absolute;
          top: -25rpx;
          line-height: 50rpx;
          color: #fff;
          background-color: #e0bb80;
          border-radius: 25rpx;
        }
      }
      .active {
        background-color: #fcf5ea;
        border: 4rpx solid #e2b778;
        color: #754605;
      }
    }
    // 赠送列表
    // .gift-list {
    //   margin-top: 20rpx;
    //   height: 200rpx;
    //   background-color: #fff;
    //   padding: 35rpx 25rpx;
    //   border-radius: 10rpx;
    //   .info {
    //     display: flex;
    //     align-items: center;
    //     border-radius: 10rpx;
    //     height: 120rpx;
    //     border: 1px solid #f2f2f2;
    //     padding: 10rpx;
    //     .left {
    //       width: 100rpx;
    //       height: 100rpx;
    //       background-color: #be2a2b;
    //       border-radius: 20rpx;
    //       display: flex;
    //       align-items: center;
    //       justify-content: center;
    //     }
    //     .center {
    //       flex: 1;
    //       padding-left: 30rpx;
    //     }
    //     .right {
    //       padding-right: 20rpx;
    //     }
    //   }
    // }
    .explain {
      padding-top: 30rpx;
      font-size: 26rpx;
      color: #b2b2b2;
    }
  }

  .member-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 200rpx;
    padding: 30rpx;
    background-color: #fff;
  }
}
</style>
